/*
显示指定用户列表的UI组件
 */
import React, {Component} from 'react';
import {withRouter} from 'react-router-dom';
import PropTypes from 'prop-types';
import {WingBlank, Card, WhiteSpace} from 'antd-mobile';
import QueueAnim from 'rc-queue-anim';

const Header = Card.Header;
const Body = Card.Body;

class UserList extends Component {
    static propTypes = {
        userList: PropTypes.array.isRequired
    }

    render() {
        const {userList} = this.props;
        return (
            <WingBlank style={{marginBottom: 50, marginTop: 50}}>
                <QueueAnim type='scale' delay={100}>
                    {
                        userList.map(user => (
                            <div key={user._id}>
                                <WhiteSpace/>
                                <Card onClick={() => this.props.history.push(`/chat/${user._id}`)}>
                                    <Header
                                        thumb={user.header ? require(`../../assets/images/${user.header}.png`) : null}
                                        extra={user.username}
                                    />
                                    <Body>
                                    <div>职位: {user.post}</div>
                                    {user.company ? <div>公司: {user.company}</div> : null}
                                    {user.salary ? <div>月薪: {user.salary}</div> : null}
                                    <div>描述: {user.info}</div>
                                    </Body>
                                </Card>
                            </div>
                        ))
                    }
                </QueueAnim>
            </WingBlank>
        )
    }
}

//向外暴露withRouter()包装产生的组件
//内部会向组件中传入一些路由组件特有的属性：history,location,math
export default withRouter(UserList);

